import { Button, Dialog, Form, Input } from '@alifd/next';
import { t } from '@lingui/macro';
import React, { useRef, useState, useEffect } from 'react';
import DrawerFooter from '@/components/DrawerFooter';
import { observable } from 'mobx';

const CancelTask = (props) => {
  const { visible, onClose, onSubmit } = props;
  const [formData] = useState(() => observable({}));
  const editCtx = useRef({ origin: {}, changed: {} }).current;

  useEffect(() => {
    _.assign(formData, {});
    return (() => {
      _.set(formData, 'remark', '');
    });
  }, [visible]);

  const handleChange = (values, item) => {
    const { name, value } = item;
    _.set(formData, name, value);

    editCtx.changed[name] = value == _.get(editCtx.origin, name) ? undefined : value;
  };

  return (
    <Dialog
      v2
      visible={visible}
      title={t`取消任务`}
      onClose={onClose}
      closeMode={['esc', 'mask', 'close']}
      width={'450px'}
    >
      <Form
        inline
        value={formData}
        onChange={handleChange}
      >
        <Form.Item
          label={t`取消原因`}
          labelAlign="top"
          required
          name="remark"
          requiredMessage="请输入取消原因"
        >
          <Input.TextArea style={{ width: 400 }} />
        </Form.Item>
      </Form>
      <DrawerFooter>
        <Form.Submit validate type="primary" onClick={() => onSubmit(formData)}>{t`保存`}</Form.Submit>
        <Button style={{ marginLeft: 8 }} onClick={onClose}>{t`取消`}</Button>
      </DrawerFooter>
    </Dialog>
  );
};

export default CancelTask;
